<template>
  <div style="margin-top:20px">
    <div
      class="demo-image__placeholder"
      style="margin-top:20px"
    >
      <div
        class="block"
        style="width:855px;margin:0 auto;position:relative"
        v-if="card[0]"
      >
        <div
          class="demonstration"
          style="position:absolute;right:10px"
        >
          <div style="font-size:22px;width:350px;font-weight:bold">{{card[0].name}}</div>
          <div style="font-size:22px;color:red;margin-top:10px">￥{{card[0].price.toFixed(2)}}</div>
          <div style="margin-top:10px;">
            <el-tag
              type="success"
              effect="dark"
              style="margin-right:10px;"
            >
              地址
            </el-tag>
            <span style="font-size:14px">{{card[0].place}}</span>
          </div>
          <div>
            <el-tag
              type="success"
              effect="dark"
              style="margin-right:10px;margin-top:10px;"
            >
              标签
            </el-tag>
            <span style="font-size:14px">{{card[0].pc}}</span>
          </div>
          <div>
            <el-tag
              type="success"
              effect="dark"
              style="margin-right:10px;margin-top:10px;"
            >
              日期
            </el-tag>
            <span style="font-size:14px">{{card[0].data}}</span>
          </div>
          <div>
            <el-tag
              type="success"
              effect="dark"
              style="margin-right:10px;margin-top:10px;"
            >
              电话
            </el-tag>
            <span style="font-size:14px">{{card[0].phone}}</span>
          </div>
          <div>
            <el-button
              type="primary"
              round
              style="margin-top:15px"
              @click="shoucang"
            >收藏</el-button>
            <el-button
              icon="el-icon-star-off"
              circle
              :style="{'color':flag?'red':'','font-size':'17px'}"
              @click="shoucang"
            ></el-button>
          </div>
          <div>
            <!-- <el-button
              type="danger"
              round
              style="margin-top:15px"
              @click="open"
            >立即购买</el-button> -->
            <el-button
              type="danger"
              style="margin-top:15px"
              @click="dialogFormVisible = true"
            >立即购买</el-button>
            <el-dialog
              title="收货地址"
              :visible.sync="dialogFormVisible"
            >
              <el-form :model="form">
                <el-form-item
                  label="姓名"
                  :label-width="formLabelWidth"
                >
                  <el-input
                    v-model="form.name"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="电话"
                  :label-width="formLabelWidth"
                >
                  <el-input
                    v-model="form.phone"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="地址"
                  :label-width="formLabelWidth"
                >
                  <el-input
                    v-model="form.place"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-form>
              <div
                slot="footer"
                class="dialog-footer"
              >
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button
                  type="primary"
                  @click="buy"
                >下 单</el-button>
              </div>
            </el-dialog>
          </div>
        </div>
        <el-image
          :src="
                  card[0].src"
          style="width:400px;position:relative;"
        >
          <div
            slot="placeholder"
            class="image-slot"
          >
            加载中<span class="dot">...</span>
          </div>
        </el-image>
      </div>
    </div>
    <comment :card="card"></comment>
  </div>
</template>
<script>
import comment from '../../components/comment.vue'
var moment = require('moment')
export default {
  components: { comment },
  data: () => ({
    card: [],
    flag: false,
    sc: {},
    dialogTableVisible: false,
    dialogFormVisible: false,
    form: {
      name: '',
      phone: '',
      place: '',
      date: moment().format('MMMM Do YYYY, hh:mm:ss a'),
      st: 0
    },
    formLabelWidth: '120px'
  }),
  async created() {
    const res = await this.$http.goodsdetail(this.$route.params, this.$route.params.id)
    this.card = res.message
    console.log(this.form)
    this.sc.id = res.message[0].id
    this.sc.name = res.message[0].name
    this.sc.price = res.message[0].price
    this.form.price = res.message[0].price
    this.sc.src = res.message[0].src
    this.sc.stat = true
    this.sc.col = res.message[0].col
    console.log(JSON.parse(this.$store.state.user[0].shoucang))
    JSON.parse(this.$store.state.user[0].shoucang).forEach(el => {
      if (el.id === this.sc.id) {
        this.flag = el.stat
      }
    })
  },
  methods: {
    async buy() {
      console.log(this.form)
      console.log(this.card)
      if (this.card[0].st === 0) {
        this.sc.b_time = moment().format('MMMM Do YYYY, hh:mm:ss a')
        this.sc.st = 0
        console.log(this.$store.state.user[0])
        if (!this.$store.state.user[0].dingdan) {
          this.$store.state.user[0].dingdan = []
          this.$store.state.user[0].dingdan.push(this.sc)
        } else {
          this.$store.state.user[0].dingdan.push(this.sc)
        }
        await this.$http.shopping(this.$store.state.user[0].dingdan, this.$store.state.user[0].username)
        await this.$http.sellshopping(this.form, this.card[0].id)
        this.card[0].st = 1
        this.$message({
          type: 'success',
          message: '提交订单成功!'
        })
      } else {
        this.$message({
          type: '',
          message: '宝贝已下架!'
        })
      }
    },
    open() {
      this.$confirm('确认是否为心仪的宝贝(请勿提前付款，预防上当受骗), 确认购买?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true
      }).then(async () => {
        this.$prompt('请输入邮箱', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '你的邮箱是: ' + value
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
        this.$message({
          type: 'success',
          message: '提交订单成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消购买'
        })
      })
    },
    shoucang() {
      this.flag = !this.flag
      //玩家是否有收藏
      if (this.flag && this.$store.state.user[0].shoucang) {
        //若收藏过则改变状态为收藏
        this.$store.state.user[0].shoucang.map((el) => {
          let fl = false
          if (el.id === this.sc.id) {
            console.log(1)
            el.stat = true
            fl = true
          }
          //没有收藏过则加入收藏
          if (!fl) {
            console.log(2)
            console.log(this.$store.state.user[0].shoucang)
            this.$store.state.user[0].shoucang.push(this.sc)
          }
        })
      } else {
        this.$store.state.user[0].shoucang = []
        this.$store.state.user[0].shoucang.push(this.sc)
        console.log(this.$store.state.user[0].shoucang)
      }
      //取消收藏
      if (!this.flag) {
        this.$store.state.user[0].shoucang[0].map((el, index) => {
          if (el.id === this.sc.id) {
            el.stat = false
          }
        })
      }
      this.$http.shoucang(this.$store.state.user[0].shoucang, this.$store.state.user[0].username)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
